<template>
  <div class="keyan">
    <div class="project-info-content">
      <header>
        <span>排序：<b class="active-blue m-r-10">浏览量降序</b> 浏览量升序</span>
        <span class="input-box">
          <el-input v-model="searchValue" placeholder="请输入关键词进行搜索" class="input-with-select" style="width: 420px; height: 35px">
            <template #prepend>
              <el-select v-model="searchKey" placeholder="Select" style="width: 120px">
                <el-option label="全文" value="1" />
              </el-select>
            </template>
            <template #append>
              <el-button icon="Search" />
            </template>
          </el-input>
        </span>
      </header>
      <main>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="left-wrap m-t">
              <div class="left-content">
                <el-collapse v-model="activeNames">
                  <el-collapse-item class="item-content m-b-10" v-for="(item, index) in leftBanners" :key="index" :title="item.name" :name="index">
                    <LeftBannerItem :ref="`leftBannerItemRef${index}`" :itemBanner="item" :activeNames="activeNames" :leftForm="leftForm"
                      @changeLeft="changeLeft" />
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </el-col>
          <el-col :span="20">
            <ul>
              <li v-for="(item, index) in noticeList" :key="index">
                <div class="imgBox">
                  <div class="pic-img">
                    <img v-if="item.fileImgList.length != 0" :src="item.fileImgList[0].url" alt="" />
                    <img v-else src="@/assets/img/yiqi1.jpeg" alt="" />
                  </div>
                  <div class="desc">
                    <span class="instru-sort">
                      {{ item.softwareType }}
                    </span>
                  </div>
                </div>
                <div class="bottom">
                  <p class="title" @click="goDetail(item)">{{ item.softwareName }}</p>
                  <p class="belong-unit">
                    <span class="txt">{{ item.managementUnit }}</span>
                  </p>
                  <p class="icons ">
                    <span class="flex">
                      <i class="el-icon-location"></i>
                      <span
                        style="font-size:16px;vertical-align:top;display:inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        {{ item.placementAddress }}</span>
                    </span>
                    <span class="pull-right flex">
                      <!-- <span class="m-r-10">
                      <i class="el-icon-star-off"></i>
                    </span> -->
                      <!-- <i class="el-icon-view m-r-10"></i>
                      63 -->
                    </span>
                  </p>
                  <p class="buttons m-t">
                    <el-button type="primary" v-if="item.Favorite == 1" plain size="small" @click="changeFavoriteStatus(item,'0')">取消收藏</el-button>
                    <el-button type="primary" v-else plain size="small" @click="changeFavoriteStatus(item,'1')">收藏</el-button>
                    <!-- <el-button type="primary" plain size="small">取消收藏</el-button> -->
                    <el-button type="primary" plain size="small" @click="addMake(item)">预约</el-button>
                    <el-button type="primary" plain size="small" @click="addConsult(item)">咨询</el-button>
                  </p>
                </div>
              </li>
            </ul>
            <el-pagination v-if="queryParams.total>0" class="pagination-container m-t" :current-page="queryParams.currentPage"
              :page-size="queryParams.pageSize" :page-sizes="[9, 18, 36, 64]" layout="total, sizes, prev, pager, next, jumper"
              :total="queryParams.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </el-col>
        </el-row>
      </main>
      <MakeManageAdd ref="MakeManageAddRef" />
      <ConsultManageAdd ref="ConsultManageAddRef" />
    </div>
  </div>
</template>

<script >
import { getPublishDataDataList } from '@/api/yqgx/publish'
import { updateSoftware } from '@/api/yqgx/software'
import LeftBannerItem from './common/leftBannerItem.vue'
import MakeManageAdd from '@/views/Information/serviceManage/makeManage/common/add.vue'
import ConsultManageAdd from '@/views/Information/serviceManage/consultManage/common/add.vue'
export default {
  components: {
    LeftBannerItem,
    MakeManageAdd,
    ConsultManageAdd
  },
  data() {
    return {
      searchKey: '1',
      searchValue: '',
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 9,
        resourceType: 'software'
      },
      activeNames: [0, 1, 2],
      leftForm: {
        yiqi: ['海洋仪器']
      },
      leftBanners: [
        {
          fieldName: 'yiqi',
          name: '软件分类',
          childName: JSON.parse(localStorage.getItem('dictLists'))
            .softwareType
        },
        {
          fieldName: 'xueke',
          name: '部署方式',
          childName: JSON.parse(localStorage.getItem('dictLists'))
            .deploymentMode
        },
        {
          fieldName: 'unit',
          name: '所属大单位',
          childName: JSON.parse(localStorage.getItem('dictLists')).largeUnits
        }
      ],
      noticeList: [
        {
          title: '信息科学与系统科学基础学科',
          img: 'yiqi1',
          time: '2023-4-19'
        },
        {
          title: '稳态强磁场实验室装置',
          img: 'yiqi2',
          time: '2023-4-18'
        },
        {
          title: '多波束测深仪',
          img: 'yiqi3',
          time: '2023-3-21'
        },
        {
          title: '水声探测仪',
          img: 'yiqi3',
          time: '2023-3-01'
        },
        {
          title: '双频识别声呐',
          time: '2023-2-24'
        },
        {
          title: '临底泥沙输移测量系统（平台）',
          time: '2023-2-19'
        },
        {
          title: '深水航道试验厅测控设备',
          time: '2023-1-08'
        },
        {
          title: '条带测深声呐',
          time: '2023-1-08'
        },
        {
          title: '条带测深声呐',
          time: '2023-1-08'
        }
      ],
      classifyList: [],
      subjectList: [],
      allList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeLeft({ name, res }) {
      if (name == '软件分类') {
        this.classifyList = res
      }
      if (name == '部署方式') {
        this.subjectList = res
      }
      this.getSelectList()
    },
    getSelectList() {
      if (this.classifyList.length != 0 || this.subjectList.length != 0) {
        this.noticeList = []
        let midList = []
        this.classifyList.forEach(classify => {
          midList = this.allList.filter(item => classify == item.softwareType)
          this.noticeList = this.removeDuplicates([
            ...this.noticeList,
            ...midList
          ])
        })
        this.subjectList.forEach(subject => {
          midList = this.allList.filter(
            item => item.deploymentMethod == subject
          )
          this.noticeList = this.removeDuplicates([
            ...this.noticeList,
            ...midList
          ])
        })
      } else {
        this.noticeList = this.allList
      }
    },
    removeDuplicates(arr) {
      let seen = [] // 创建一个空对象来存储已经存在的ID
      return arr.filter(function (item) {
        if (seen.includes(item.id)) {
          return false
        } else {
          seen.push(item.id)
          return true
        }
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.currentPage = val
      this.getList()
    },
    getList() {
      getPublishDataDataList(this.queryParams).then(res => {
        this.allList = res.data
        this.noticeList = this.allList
        this.queryParams.total = res.total
      })
    },
    addMake(item) {
      console.log('[ item ] >', item)
      item.title = item.softwareName
      item.id = ''
      this.$refs.MakeManageAddRef.show({
        title: '服务预约信息',
        isLook: 'add',
        data: item
      })
    },
    addConsult(item) {
      console.log('[ item ] >', item)
      item.title = item.softwareName
      item.id = ''
      this.$refs.ConsultManageAddRef.show({
        title: '服务咨询信息',
        isLook: 'add',
        data: item
      })
    },
    changeFavoriteStatus(row, status) {
      let that = this
      row.Favorite = status
      updateSoftware(row).then(() => {
        that.getList()
      })
    },
    goDetail(item) {
      this.$router.push({ name: 'softDetailPage', params: { item: item } })
    }
  }
}
</script>

<style lang="less" scoped>
  .keyan {
    background: url('~@/assets/img/待办.png') no-repeat center;
    background-size: 100% 100%;
    padding: 30px 0;
  }
  .project-info-content {
    width: 63%;
    margin: 0 auto;
    // height: 600px;
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dadcde;
      padding-bottom: 10px;
      color: #333;
      .active-blue {
        color: #358aff;
      }
      :deep(.input-box) {
        font-size: 16px !important;
        border: 1px solid #dbddde;
        .el-input {
          width: 100% !important;
        }
        border-radius: 4px;
        .el-input__wrapper,
        .el-input__inner {
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
          background: transparent !important;
        }
        .el-input-group__prepend,
        .el-input__wrapper,
        .el-input-group__append {
          background: transparent;
          border: none !important;
          box-shadow: none !important;
          color: #333 !important;
        }
      }
    }
    main {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        // justify-content: space-between;
        li {
          width: 32%;
          position: relative;
          border-radius: 5px;
          background: #fff;
          box-shadow: 0px 0px 8px 2px #e4e8eb;
          margin-top: 20px;
          margin-right: 15px;
          overflow: hidden;
          &:nth-child(3n + 3) {
            margin-right: 0;
          }
          // border-bottom: 1px dashed #c5c6c8;
          // display: flex;
          // // justify-content: space-between;
          // align-items: center;
          .imgBox {
            position: relative;
            width: 100%;
            height: 180px;
            padding: 20px;
            .pic-img {
              width: 100%;
              height: 100%;
              overflow: hidden;
              object-fit: cover;
            }

            img {
              cursor: pointer;
              display: inline-block;
              width: 100%;
              height: 100%;
              transition: transform 1s;
              -moz-transition: -moz-transform 1s;
              -webkit-transition: -webkit-transform 1s;
              -o-transition: -o-transform 1s;
              &:hover {
                transform: scale(1.2, 1.2);
                -ms-transform: scale(1.2, 1.2);
                -moz-transform: scale(1.2, 1.2);
                -webkit-transform: scale(1.2, 1.2);
                -o-transform: scale(1.2, 1.2);
              }
            }
            .desc {
              box-sizing: border-box;
              padding: 0 20px 0 10px;
              height: 44px;
              line-height: 44px;
              background: #f3ce468a;
              position: absolute;
              right: 0;
              top: 50%;
              color: #fff;
              border-radius: 10px 0 0 10px;
              text-align: left;
              font-size: 14px;
              min-width: 110px;
            }
          }

          .bottom {
            padding: 0 20px 20px;
            .title {
              cursor: pointer;
              font-size: 20px;
              font-weight: bold;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .brand {
              margin-top: 10px;
              font-size: 16px;
              font-weight: 400;
              color: #6a7a8e;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .type,
            .belong-unit {
              margin-top: 8px;
              font-size: 16px;
              font-weight: 400;
              color: #6a7a8e;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .icons {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 8px;
              font-size: 16px;
              font-weight: 400;
              color: #6a7a8e;
            }
            .flex {
              display: flex;
              align-items: center;
            }
            .el-icon {
              color: #6a7a8e;
            }
          }
        }
      }
    }
  }
  .m-l-10 {
    margin-left: 10px;
  }
</style>
